<template>
    <div class="content">
        <ul>
            <li v-for="item in news" :key="item.id">
                <RouterLink :to="{
                    name: 'xiang',
                    query: {
                        id: item.id,
                        title: item.title,
                        content: item.content
                    }
                }">
                    {{ item.title }}
                </RouterLink>
            </li>
        </ul>
        <div class="new-content">
            <RouterView />
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
let news = reactive([
    { id: 'xxdddd1', title: '震惊', content: "天上掉馅饼" },
    { id: 'xxdddd2', title: 'HAHA', content: "明天不上班" },
    { id: 'xxdddd3', title: '天哪', content: "这个问题好难" },
])

</script>

<style lang="scss" scoped>
.content {
    display: flex;

    ul {
        flex: 1;
        padding: 0;
        margin: 30px;
    }

    .new-content {
        width: 500px;
        margin: 30px;
        border: 1px solid goldenrod;
    }
}
</style>